<template>
  <div class="amap">
    <van-cell
      :title="node.answer ? node.answer : '请选择'"
      value=""
      is-link
      :clickable="!disabled"
      @click="disabled?null:show = true"
    >
    </van-cell>
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '100%', width: '100%' }"
    >
      <el-amap-search-box
        ref="search"
        class="search-box"
        :searchOption="searchOption"
        :on-search-result="onSearchResult"
      >
      </el-amap-search-box>
      <el-amap
        class="amap-box"
        :amap-manager="amapManager"
        :vid="'amap-vue'"
        :center="center"
        :zoom="zoom"
        :events="events"
      >
        <el-amap-marker :position="center"></el-amap-marker>
      </el-amap>
    </van-popup>
  </div>
</template>

<script>
import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
let amapManager = new AMapManager();
let geo;
export default {
  props: ["node"],
  data() {
    const that = this;
    return {
      show: false,
      amapManager,
      amap: null,
      center: [116.481485, 39.990464],
      zoom: 18,
      address: null,
      searchOption: {
        city: "全国",
        citylimit: false,
      },
      events: {
        init(o) {
          lazyAMapApiLoaderInstance.load().then(() => {
            that.initMap();
          });
        },
      },
      disabled: false,
    };
  },
  mounted() {
    let t=this
    while (1) {
      if (
        (t.$options._componentTag =
          "el-form" && t.$el.classList.contains("el-form"))
      ) {
        this.disabled = t.$props.disabled;
        break;
      } else if (!t.$parent) {
        break;
      } else {
        t = t.$parent;
      }
    }
  },
  methods: {
    initMap() {
      document.getElementsByClassName("search-btn")[0].innerHTML =
        "<span style='color:#409EFF;'>搜索</span>";
      let s = document.createElement("span");
      s.innerHTML = "确定";
      s.style.color = "#67C23A";
      s.style.cursor = "pointer";
      s.style.margin = "0 10px";
      s.addEventListener("click", () => {
        this.show = false;
      });
      document.getElementsByClassName("search-box-wrapper")[0].appendChild(s);
      this.amap = this.amapManager.getMap();
      geo = new AMap.Geolocation({
        enableHighAccuracy: true,
        timeout: 10000,
        maximumAge: 0,
        zoomToAccuracy: true,
        buttonPosition: "RB",
      });

      this.amap.addControl(geo);

      geo.getCurrentPosition((s, res) => {
        if (s == "complete") {
          this.node.answer = res.formattedAddress;
          this.$refs.search.keyword = res.formattedAddress;
          this.center = [res.position.lng, res.position.lat];
        }
        document
          .getElementsByClassName("amap-geolocation-con")[0]
          .addEventListener("click", () => {
            geo.getCurrentPosition((s, res) => {
              if (s == "complete") {
                this.node.answer = res.formattedAddress;
                this.$refs.search.keyword = res.formattedAddress;
                this.center = [res.position.lng, res.position.lat];
              }
            });
          });
      });
    },
    onSearchResult(pois) {
      if (pois.length > 0) {
        this.$nextTick(() => {
          this.$refs.search.keyword = pois[0].name;
          this.node.answer = pois[0].name;
        });
        this.center = [pois[0].lng, pois[0].lat];
      }
    },
  },
};
</script>

<style scoped>
.amap >>> .el-vue-amap {
  width: 100%;
  height: 100%;
}
.amap >>> .el-vue-search-box-container {
  width: 100%;
}
.amap {
  width: 100%;
}
.amap >>> .amap-box {
  height: 90%;
}
.amap >>> .van-cell::after {
  border: none;
}
.amap >>> .van-cell__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.amap >>> .van-cell {
  padding: 10px;
  padding-left: 0px;
  padding-right: 0;
  width: 100%;
}
.amap >>> .van-cell__value {
  flex: none;
}
</style>
